<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
		<style type="text/css" media="screen">
			html, body {
				background: #000000;
				color: #efefef;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			//CONSTANTS
			WIDTH = 1300, HEIGHT = 700;
			TOUCH = 100;

			//functions
			function randomColor(){
				var r = Math.floor(Math.random() * 255);
				var g = Math.floor(Math.random() * 255);
				var b = Math.floor(Math.random() * 255);
				return "rgb("+r+","+g+","+b+")";
			}

			//class
			Fish = function(){
				this.x = Math.floor(Math.random() * WIDTH);
				this.y = Math.floor(Math.random() * HEIGHT);
				this.direction = Math.random() * Math.PI*2;
				this.speed = Math.floor(Math.random() * 30);
				this.color = randomColor();
			};
			Fish.prototype.move = function(){
				this.x += Math.cos(this.direction) * this.speed;
				this.y += Math.sin(this.direction) * this.speed;
				//overwrap
				if(this.x < 0) this.x += WIDTH;
				if(this.y < 0) this.y += HEIGHT;
				this.x %= WIDTH;
				this.y %= HEIGHT;
			}
			Fish.prototype.update = function(){
				var isNear = false;
				for(var i=0; touches && i<touches.length; i++){
					var touch = touches[i];
					var directionToMouse = Math.atan2(this.y - touch.pageX, this.x - touch.pageY);
					var directionDelta = directionToMouse - this.direction;
					directionDelta = directionDelta / Math.PI * 180;
					if(directionDelta < -180) directionDelta += 360;

					var distance = Math.sqrt(Math.pow(this.x-touch.pageX,2) + Math.pow(this.y-touch.pageY,2));

					if(distance < TOUCH){ // near hand
						if(directionDelta > 0){ //rotate right
							this.direction += Math.min(directionDelta, 30) * Math.PI / 180;
						}else{ //rotate left
							this.direction += Math.max(directionDelta, -30) * Math.PI / 180;
						}
						isNear = true;
						this.speed = 20; //faster move for run
					}
					this.direction %= Math.PI*2;
				}

				if(isNear == false){
					this.speed += (Math.random() - 0.5) * 4;
					this.direction += (Math.random()-0.5)*Math.PI/180 * 20;
				}
				if(this.speed > 10) {
					this.speed -= 2;
				}else if(this.speed < 0){
					this.speed = 0;
				}
			};

			//variables
			//var isClicked = false;
			//var mouseX = null,mouseY = null;
			var touches = null;
			var Fishes = [];
			for(var i=0; i<10; i++){
				Fishes.push(new Fish());
			}

			window.addEventListener('load', loadHandler, false);

			function loadHandler(){
				canvas = document.getElementById("maincanvas");
				WIDTH = window.innerWidth;
				HEIGHT = window.innerHeight;
				canvas.width = WIDTH;
				canvas.height = HEIGHT;
				TOUCH = WIDTH/10;
				context = canvas.getContext('2d');

				mouseDownHandler = function(event){
					if(event.which == 1){
						if(!touches){
							touches = [];
						}
						touches[0] = event;
					}
				}
				mouseUpHandler = function(event){
					touches = null;
				}
				mouseMoveHandler = function(event){
					if(touches){
						touches[0] = event;
					}
				};
				canvas.addEventListener('mousedown',mouseDownHandler, false);
				canvas.addEventListener('mouseup',mouseUpHandler, false);
				canvas.addEventListener('mousemove',mouseMoveHandler, false);

				touchHandler = function(event){
					event.preventDefault();
					touches = event.touches;
				}
				canvas.addEventListener('touchstart', touchHandler, false);
				canvas.addEventListener('touchmove', touchHandler, false);
				canvas.addEventListener('touchend', touchHandler, false);

				DrawFrame = function(){
					//draw background
					context.fillStyle = "black";
					context.fillRect(0, 0, WIDTH, HEIGHT);

					for(var i in Fishes){
						var fish = Fishes[i];
						fish.update();
						fish.move();
						context.save();

						context.lineWidth = 2;
						context.strokeStyle = fish.color;
						context.translate(fish.x, fish.y);
						context.rotate(fish.direction);

						context.beginPath();
						context.moveTo(10,0);
						context.lineTo(0,10);
						context.lineTo(-20, -10);
						context.lineTo(-20, 10);
						context.lineTo(0,-10);
						context.closePath();
						context.stroke();

						context.beginPath();
						context.arc(3, 0, 3, 0, Math.PI*2);
						context.stroke();

						context.restore();
					}

					for(var i=0; touches && i<touches.length; i++){
						var touch = touches[i];
						context.save();
						context.strokeStyle = "#ffff00";
						context.lineWidth = 3;
						context.translate(touch.pageX, touch.pageY);
						context.beginPath();
						context.arc(0, 0, TOUCH, 0, Math.PI*2);
						context.stroke();
						context.restore();
					}
				};
				setInterval(DrawFrame, 20);
			}
		</script>
		<title>Fish</title>
	</head>
	<body>
		<canvas id="maincanvas"></canvas>
	</body>
</html>
